<template>
  <ul oncontextmenu="window.event.returnValue=false">
    <template v-for="(item,index) in Menu">
      <li
        @mouseover="mouseoverLi(item)"
        :key="index"
        v-show="item.isShow"
        @click.stop="handleMethod(item.method,item.param,item.status)"
      >
        <span>{{item.name}}</span>
        <i
          class="el-icon-arrow-right pull-right"
          :class="{'trans-left':item.show}"
          v-if="item.children && item.children.length>0"
        ></i>
        <i
          class="el-icon-check pull-right"
          v-if="item.checked"
        ></i>
        <customMenuItem
          :menuData="item.children"
          v-show="item.show"
          v-if="item.children && item.children.length>0"
          @list="handleMethod"
        ></customMenuItem>
      </li>
    </template>
  </ul>
</template>
<script>
import { clone } from "@/plugin/tool.js";
export default {
  name: "customMenuItem",
  data() {
    return {
      Menu: [],
      lastItem: {},
    };
  },
  props: {
    menuData: {
      type: Array,
    },
    ulShow: {
      type: Boolean,
    },
  },
  watch: {
    menuData: {
      deep: true,
      immediate: true,
      handler: function (item) {
        let Menu = clone(item);
        Menu.map(($item) => {
          $item.show = false;
        });
        this.Menu = Menu;
      },
    },
  },
  methods: {
    handleMethod(method, param, status) {
      if (status == 2) return false;
      this.$emit("list", method, param);
    },
    mouseoverLi(item) {
      if (this.lastItem.show) {
        this.lastItem.show = false;
      }
      if (item.children) {
        item.show = true;
        this.lastItem = item;
      }
    },
  },
};
</script>
